<template>
  <component
    :is="iconType"
    :type="iconName"
    :color="iconColor"
    :size="iconSize"
  />
</template>

<script>
import Icons from "./components/icons.vue";
import Svgs from "./components/svgs.vue";
import settings from "@/settings";
export default {
  name: "CommonIcon",
  components: { Icons, Svgs },
  props: {
    type: {
      type: String,
      default: () => "",
    },
    color: String,
    size: Number,
    svg: Boolean,
    font: Boolean,
  },
  computed: {
    iconType() {
      if (this.isViewUI(this.type)) {
        return "Icon";
      } else if (this.type.indexOf("-") != -1) {
        let categoryName = "";
        if (this.type.indexOf(" ") != -1) {
          categoryName = this.type.split(" ")[0];
        } else {
          categoryName = this.type.split("-")[0];
        }
        const category = settings.parse(`icons.${categoryName}`);
        if (category && category.endsWith && category.endsWith(".js")) {
          return "Svgs";
        } else {
          return "Icons";
        }
      } else {
        return "Icon";
      }
    },
    iconName() {
      return this.type;
    },
    iconSize() {
      return this.size || (this.iconType === "Icons" ? 12 : undefined);
    },
    iconColor() {
      return this.color || undefined;
    },
  },
  methods: {
    isViewUI(type) {
      return type.startsWith("ios") || type.startsWith("md");
    },
  },
};
</script>
